<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
            <el-col :span="6">
                <el-form-item label="诉讼编号:" prop="proceedCode">
                    <el-input v-model="queryParams.proceedCode" clearable placeholder="请输入诉讼编号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="客户名称:" prop="customName">
                    <el-input v-model="queryParams.customName" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="完成时间:" prop="sendTime">
                    <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format='yyyy-MM-dd'
                        style="width: 100%;" v-model="timeRange"  @change="changeTime">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="诉讼状态:" prop="proceedStatus">
                    <el-select v-model="queryParams.proceedStatus" clearable>
                        <el-option :key="item.value" :label="item.label" :value="item.value"
                            v-for="item in dict.type.progress_litigation"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

        </SearchContent>

        <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleOperate('',7)"
                           v-hasPermi="['purchaseManage:purchaseList:add']" :disabled="completingLitigationStatus">完成诉讼
                </el-button>
            </div>
            <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" :isSelect="isSelect"
						@selectionChange="selectionChange" border>
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" max-width="180px">
                        <template v-slot="{ row }">
                            <e-button size="mini" type="text" @click="handleOperate(row,1)"
                                v-hasPermi="['collectionManagement:litigationHandling:see']">查看
                            </e-button>
                            <e-button size="mini" type="text" @click="handleOperate(row,2)"
                                v-hasPermi="['collectionManagement:litigationHandling:programme']">提交方案
                            </e-button>
                            <e-button size="mini" type="text" @click="handleOperate(row,3)"
                                v-hasPermi="['collectionManagement:litigationHandling:compromise']">提交和解结果
                            </e-button>
                            <e-button size="mini" type="text" @click="handleOperate(row,4)"
                                v-hasPermi="['collectionManagement:litigationHandling:mediate']">提交调解结果
                            </e-button>
                            <e-button size="mini" type="text" @click="handleOperate(row,5)"
                                v-hasPermi="['collectionManagement:litigationHandling:judgment']">提交判决结果
                            </e-button>
                            <e-button size="mini" type="text" @click="handleOperate(row,6)"
                                v-hasPermi="['collectionManagement:litigationHandling:force']">提交强制执行
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="诉讼编号" align="center" prop="proceedCode" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="订单编号" align="center" prop="orderCode" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="客户名称" align="center" prop="customName" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="诉讼状态" align="center" prop="proceedStatus" min-width="120px"
                        show-overflow-tooltip>
                        <template v-slot="{ row }">
                            <dict-tag :options="dict.type.progress_litigation" :value="row.proceedStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column label="完成时间" align="center" prop="completeTime" min-width="120px"
                        show-overflow-tooltip />
                </template>
            </table-page>

        </div>
        
        <!-- 提交方案 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="45%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <el-form-item label="诉讼方案类型" prop="resource" v-if="dialogType==2">
                    <el-radio-group v-model="ruleForm.resource">
                    <el-radio :label=1>和解</el-radio>
                    <el-radio :label=2>调解</el-radio>
                    </el-radio-group>
                </el-form-item>
               
                <el-form-item label="和解协议" prop="settlementAgreement" v-if="dialogType==3">
                    <ImageCommon  v-model="ruleForm.settlementAgreement"  :up-type="2" info="选择和解协议" :limit="20"></ImageCommon>
                </el-form-item>
                <el-form-item label="和解金额" prop="money" v-if="dialogType==3">
                    <el-input  v-model="ruleForm.money" placeholder="选输和解解金额"></el-input>
                </el-form-item>
                <el-form-item label="调解书" prop="mediationLetter" v-if="dialogType==4">
                    <ImageCommon  v-model="ruleForm.mediationLetter"  :up-type="2" info="选择调解书" :limit="20"></ImageCommon>
                </el-form-item>
                <el-form-item label="调解金额" prop="mediationAmount" v-if="dialogType==4">
                    <el-input  v-model="ruleForm.mediationAmount" placeholder="选输入调解金额"></el-input>
                </el-form-item>
                <el-form-item label="判决书" prop="judgmentLetter" v-if="dialogType==5">
                    <ImageCommon  v-model="ruleForm.judgmentLetter"  :up-type="2" info="选择判决书" :limit="20"></ImageCommon>
                </el-form-item>
                <el-form-item label="判决金额" prop="judgmentAmount" v-if="dialogType==5">
                    <el-input  v-model="ruleForm.judgmentAmount" placeholder="选输入判决金额"></el-input>
                </el-form-item>
                <el-form-item label="强制执行立案通知书" prop="filingLetter" v-if="dialogType==6">
                    <ImageCommon  v-model="ruleForm.filingLetter"  :up-type="2" info="选择强制执行立案通知书" :limit="20"></ImageCommon>
                </el-form-item>
                <el-form-item label="最后一笔支付时间" prop="payTime" v-if="dialogType==3 || dialogType==4 || dialogType==5">
                    <el-date-picker type="datetime" placeholder="选择最后一笔支付时间" value-format='yyyy-MM-dd'
                       style="width:100%" v-model="ruleForm.payTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="完成时间" prop="completionTime" v-if="dialogType==7">
                    <el-date-picker type="datetime" placeholder="选择完成时间" value-format='yyyy-MM-dd'
                        style="width:100%" v-model="ruleForm.completionTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="说明" prop="desc">
                    <el-input type="textarea" max="1000" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="附件" prop="attachment">
                    <ImageCommon  v-model="ruleForm.attachment"  :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </div> 
        </el-dialog>
    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as apis from "@/api/collectionManagement/litigationApplication.js";
export default {
    name: "LitigationHandling",
    components: {
        SearchContent,
    },
    dicts: ['business_type', 'purchase_source', 'in_storage_status', 'in_storage_source', 'message_type','progress_litigation'],
    data() {
        return {
            // 遮罩层
            loading: false,
            retutnCarTimes: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                proceedCode: null,
                customName: null,
                proceedStatus: null,
                startTime:'',
                endTime:'',
            },
            total: 0,
            dataList: [],
            title: '查看',
            form: {
                type: '',
                paramName: '',
            },
            open: false,
            busFlowTypeList: [
                {
                    dictLabel:'诉讼中',
                    dictSort:1
                },
                {
                    dictLabel:'诉讼完成',
                    dictSort:2
                },
            ],
            ruleForm:{
                resource:1,
                desc:'',
                attachment:'',
                settlementAgreement:'',
                money:'',
                payTime:'',
                mediationAmount:'',
                judgmentAmount:'',
                mediationLetter:'',
                judgmentLetter:'',
                filingLetter:'',
                completionTime:'',
            },
            rules:{
                resource:[
                    { required: true, message: '请选择方案类型', trigger: 'blur' },
                ],
                desc:[
                    { required: true, message: '请输入方案说明', trigger: 'blur' },
                ],
                settlementAgreement:[
                    { required: true, message: '请选择和解协议', trigger: 'blur' },
                ],
                money:[
                    { required: true, message: '请输入和解金额', trigger: 'blur' },
                ],
                payTime:[
                    { required: true, message: '请选择最后一笔支付时间', trigger: 'blur' },
                ],
                mediationAmount:[
                    { required: true, message: '请输入调解金额', trigger: 'blur' },
                ],
                judgmentAmount:[
                    { required: true, message: '请输入判决金额', trigger: 'blur' },
                ],
                mediationLetter:[
                    { required: true, message: '请选择调解书', trigger: 'blur' },
                ],
                judgmentLetter:[
                    { required: true, message: '请选择判决书', trigger: 'blur' },
                ],
                filingLetter:[
                    { required: true, message: '请选择强制执行立案通知书', trigger: 'blur' },
                ],
                completionTime:[
                    { required: true, message: '请选择完成时间', trigger: 'blur' },
                ]
            },
            title:'',
            dialogType:'',
            timeRange : [],
            completingLitigationStatus:true,
            isSelect:true,
        };
    },
    mounted() {
        this.getList()
    },
    // async created() {
    //     this.busFlowTypeList = await this._getDicts("message_type");
    // },
    activated() {
        this.handleQuery()
    },
    methods: {
        // 勾选中的数据
        selectionChange(val){
            if(val.length>0){
                this.completingLitigationStatus = false
            }else{
                this.completingLitigationStatus = true
            }
        },
        // 创建时间发生改变
        changeTime(val) {
            this.queryParams.startTime = val[0]
            this.queryParams.endTime = val[1]
        },
        //提交方案确定
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.open = false
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        // 提交方案取消
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.open = false
            
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            apis.proceedHandle(this.queryParams).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
            }).finally(() => {
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                proceedCode: null,
                customName: null,
                proceedStatus: null,
            },
            this.timeRange = []
            this.handleQuery();
        },


        handleOperate(row,type) {
            this.dialogType = type
            console.log(type,111111)
            switch (type){
                case 1:
                    this.$router.push({name:'IitigationHandlinginfo'})
                break
                case 2:
                    this.open = true
                    this.title= '提交方案'
                break
                case 3:
                    this.open = true
                    this.title= '提交和解结果'
                break
                case 4:
                    this.open = true
                    this.title= '提交调解结果'
                break
                case 5:
                    this.open = true
                    this.title= '提交判决结果'
                break
                case 6:
                    this.open = true
                    this.title= '提交强制执行'
                break
                case 7:
                    this.open = true
                    this.title= '完成诉讼'
                break
            }
           
        },
    }
};
</script>
